<template>
  <div>
    <t-button size="small" @click="OnClick" theme="warning">
      <template #icon>
        <SettingIcon/>
      </template>
      设置
    </t-button>

    <t-drawer v-model:visible="data.show" :header="`修改用户【${props.id}】的基本设置`" :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="large" destroy-on-close
              confirmBtn="确认修改">
      <div>
        <t-space direction="vertical" style="width: 100%">

          <t-input-adornment prepend="锁定状态">
            <t-select v-model="data.formData.lock" size="large">
              <t-option :value="1" label="正常"/>
              <t-option :value="2" label="锁定"/>
            </t-select>
          </t-input-adornment>
          <p class="intro">
            当要修改的用户权限比自己高，或者跟自己一样的时候；锁定状态修改将不生效；
          </p>

          <t-input-adornment prepend="权限角色">
            <t-select v-model="data.formData.role.select" size="large">
              <template v-for="it in data.formData.role.list">
                <t-option :value="it.id" :label="`${it.id} _ ${it.key} _ ${it.name}`"/>
              </template>
            </t-select>
          </t-input-adornment>

          <p class="intro">
            当要修改的用户权限比自己高，或者跟自己一样的时候；权限角色修改将不生效；
          </p>

          <t-input-adornment prepend="VIP等级">
            <t-select v-model="data.formData.vip" size="large">
              <template v-for="it in 6">
                <t-option :value="it">
                  <template #content>
                    <t-space>
                      <VipIcon :vip="it"/>
                      VIP {{ it }}
                    </t-space>
                  </template>
                </t-option>
              </template>
            </t-select>
          </t-input-adornment>

          <t-input-adornment prepend="备注姓名">
            <t-input v-model="data.formData.name" size="large"/>
          </t-input-adornment>
        </t-space>
      </div>
    </t-drawer>
  </div>
</template>
<script setup lang="ts">
import {SettingIcon} from "tdesign-icons-vue-next";
import {reactive} from "vue";
import api from "../../../../api/api";
import {Role} from "../../../../tool/types";
import VipIcon from "../../../components/vip.vue"
import NotificationPlugin from "tdesign-vue-next/es/notification/plugin";

const props = defineProps(['id', 'role', 'vip', 'name', 'lock'])
const emits = defineEmits(['success'])
const data = reactive({
  show: false,
  formData: {
    id: 0,
    vip: 0,
    name: '',
    lock: 0,
    role: {
      select: 0,
      list: new Array<Role>()
    }
  }
})

const OnClick = async () => {
  data.show = true
  data.formData.id = props.id || 0
  data.formData.role.select = props.role || 0
  data.formData.vip = props.vip || 0
  data.formData.lock = props.lock || 1
  data.formData.name = props.name || ''
  let res = await api.Admin.User.GetAllRole()
  if (res != null) {
    data.formData.role.list = res.data
  }
}

const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  let res = await api.Admin.User.UpdateSetting({
    id: data.formData.id,
    vip: data.formData.vip,
    name: data.formData.name,
    lock: data.formData.lock,
    role_id: data.formData.role.select
  })
  if (res != null) {
    data.show = false
    await NotificationPlugin.success({
      title: '成功',
      content: `给用户【${props.id}】更改基本属性成功。`,
      duration: 10000,
      placement: 'bottom-right'
    })
    emits("success")
  }
}
</script>